<template>
  <div id="b_page" style="position:relative;">
  <div id="recommend">
      <com-recommend></com-recommend>
  </div>

  <div id="page">
      <div class="title">{{articleObj.title}}</div>
      <div id="html_cont"  v-html="articleObj.content"></div>
      <div class="error_view" v-if="isError">找不到该文章,请确认地址正确哦</div>
      <div v-if="!isError" id="exceptional" >
        <div>如果感觉文章对你有帮助,可以对作者进行打赏哦</div>
        <div>
           <label @click="pay('weixin')">微信打赏</label>
           <img v-if="isWeixin" src="../../static/img/weixin.jpg">
        </div>
        <div>
        <label @click="pay('zhifubao')" >支付宝打赏</label>
        <img v-if="isZhifubao" src="../../static/img/zhifubao.jpg">
        </div>
      </div>
  </div>
 
  </div>
</template>
<script > 
  import Recommend from '@/pages/recommend'
export default {
        data: function() {
            return {
                articleObj:{},
                isError:false,
                isWeixin:false,
                isZhifubao:false
            }
        },
        computed:{
           
        },
        methods:{
          pay:function(type){
            if (type=="weixin") {
              this.isWeixin=!this.isWeixin;
            }else if(type=="zhifubao"){
              this.isZhifubao=!this.isZhifubao;
            }

          }
           
           
        },
        components:{
            comRecommend:Recommend
        },
       
        created() {
            var _self=this;
           
            this.$store.commit('changeLoading', {
                isShow:true,
                title:"加载中。。。"
            })
            
            this.api.articleDetail(_self.$route.params.id).then(res => {
            _self.$store.commit('changeLoading', {
                isShow:false,
                
            })
           if (res.data=="别闹了,没有这个文章") {
              _self.isError=true;
           }else{
            _self.articleObj = res.data;
           }
            
       
            }).catch(function(error) {
                console.log(error);
            });
           
        },
         mounted: function() {
            

        },

       

    }

</script>
<style lang="scss" scoped>
    @import "../../static/css/details.scss";
</style>